<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant Order System - 餐厅点餐系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; }
        .container { max-width: 400px; margin: 0 auto; background: white; min-height: 100vh; }
        
        .header { background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: white; padding: 20px; text-align: center; position: relative; }
        .logo { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
        .language-switcher { position: absolute; top: 20px; right: 20px; }
        .language-toggle { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); color: white; padding: 8px 12px; border-radius: 20px; cursor: pointer; }
        .language-dropdown { position: absolute; top: 45px; right: 0; background: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: none; z-index: 1000; }
        .language-dropdown.show { display: block; }
        .language-option { padding: 10px 15px; cursor: pointer; color: #333; border-bottom: 1px solid #eee; }
        .language-option:last-child { border-bottom: none; }
        .language-option:hover { background: #f8f8f8; }
        
        .currency-switcher { position: absolute; top: 20px; left: 20px; }
        .currency-toggle { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); color: white; padding: 8px 12px; border-radius: 20px; cursor: pointer; }
        .currency-dropdown { position: absolute; top: 45px; left: 0; background: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: none; z-index: 1000; }
        .currency-dropdown.show { display: block; }
        .currency-option { padding: 10px 15px; cursor: pointer; color: #333; border-bottom: 1px solid #eee; }
        .currency-option:last-child { border-bottom: none; }
        .currency-option:hover { background: #f8f8f8; }
        
        .nav-tabs { display: flex; background: #fff; border-bottom: 1px solid #eee; }
        .nav-tab { flex: 1; text-align: center; padding: 15px; cursor: pointer; }
        .nav-tab.active { color: #ee5a24; border-bottom: 3px solid #ee5a24; }
        
        .content { padding: 20px; }
        
        .menu-category { margin-bottom: 30px; }
        .category-title { font-size: 18px; font-weight: bold; margin-bottom: 15px; color: #333; }
        .dish-item { display: flex; align-items: center; padding: 15px; margin-bottom: 15px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .dish-image { width: 60px; height: 60px; border-radius: 8px; background: #ff6b6b; margin-right: 15px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; }
        .dish-info { flex: 1; }
        .dish-name { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
        .dish-price { color: #ee5a24; font-weight: bold; }
        .add-btn { background: #ee5a24; color: white; border: none; padding: 8px 16px; border-radius: 20px; cursor: pointer; }
        
        .cart-item { display: flex; align-items: center; padding: 15px; margin-bottom: 15px; background: #f8f8f8; border-radius: 12px; }
        .cart-quantity { display: flex; align-items: center; margin: 0 15px; }
        .quantity-btn { width: 30px; height: 30px; border: 1px solid #ddd; background: white; border-radius: 50%; cursor: pointer; }
        .cart-total { padding: 20px; background: #fff; border-top: 1px solid #eee; }
        .total-price { font-size: 18px; font-weight: bold; color: #ee5a24; text-align: center; margin-bottom: 15px; }
        .checkout-btn { background: #ee5a24; color: white; border: none; padding: 15px; border-radius: 25px; font-size: 16px; font-weight: bold; cursor: pointer; width: 100%; }
        
        .order-item { background: #f8f8f8; padding: 15px; margin-bottom: 15px; border-radius: 12px; }
    </style>
</head>
<body>
    <div id="app" class="container">
        <div class="header">
            <div class="currency-switcher">
                <button class="currency-toggle" @click="toggleCurrencyDropdown">
                    {{ currencySymbols[currentCurrency] }}
                </button>
                <div class="currency-dropdown" :class="{show: showCurrencyDropdown}">
                    <div class="currency-option" @click="switchCurrency('CNY')">¥ CNY</div>
                    <div class="currency-option" @click="switchCurrency('USD')">$ USD</div>
                    <div class="currency-option" @click="switchCurrency('EUR')">€ EUR</div>
                    <div class="currency-option" @click="switchCurrency('JPY')">¥ JPY</div>
                </div>
            </div>
            <div class="logo">{{ t('restaurantName') }}</div>
            <div class="language-switcher">
                <button class="language-toggle" @click="toggleLanguageDropdown">
                    {{ currentLanguage === 'zh' ? '中文' : currentLanguage === 'en' ? 'EN' : '日本語' }}
                </button>
                <div class="language-dropdown" :class="{show: showLanguageDropdown}">
                    <div class="language-option" @click="switchLanguage('zh')">中文</div>
                    <div class="language-option" @click="switchLanguage('en')">English</div>
                    <div class="language-option" @click="switchLanguage('ja')">日本語</div>
                </div>
            </div>
        </div>

        <div class="nav-tabs">
            <div class="nav-tab" :class="{active: activeTab === 'menu'}" @click="activeTab = 'menu'">{{ t('menu') }}</div>
            <div class="nav-tab" :class="{active: activeTab === 'cart'}" @click="activeTab = 'cart'">{{ t('cart') }} ({{cartTotal}})</div>
            <div class="nav-tab" :class="{active: activeTab === 'orders'}" @click="activeTab = 'orders'">{{ t('orders') }}</div>
        </div>

        <div class="content" v-if="activeTab === 'menu'">
            <div class="menu-category" v-for="category in menu" :key="category.id">
                <h3 class="category-title">{{ t(category.nameKey) }}</h3>
                <div class="dish-item" v-for="dish in category.dishes" :key="dish.id">
                    <div class="dish-image">{{dish.emoji}}</div>
                    <div class="dish-info">
                        <div class="dish-name">{{ t(dish.nameKey) }}</div>
                        <div class="dish-price">{{ formatPrice(dish.price) }}</div>
                    </div>
                    <button class="add-btn" @click="addToCart(dish)">+ {{ t('add') }}</button>
                </div>
            </div>
        </div>

        <div class="content" v-if="activeTab === 'cart'">
            <div v-if="cartItems.length === 0" style="text-align: center; padding: 50px 0;">
                {{ t('emptyCart') }}
            </div>
            <div v-else>
                <div class="cart-item" v-for="item in cartItems" :key="item.id">
                    <div class="dish-image">{{item.emoji}}</div>
                    <div class="dish-info">
                        <div class="dish-name">{{ t(item.nameKey) }}</div>
                        <div class="dish-price">{{ formatPrice(item.price) }}</div>
                    </div>
                    <div class="cart-quantity">
                        <button class="quantity-btn" @click="updateQuantity(item, -1)">-</button>
                        <span style="margin: 0 10px;">{{item.quantity}}</span>
                        <button class="quantity-btn" @click="updateQuantity(item, 1)">+</button>
                    </div>
                </div>
                
                <div class="cart-total">
                    <div class="total-price">{{ t('total') }}: {{ formatPrice(totalPrice) }}</div>
                    <button class="checkout-btn" @click="checkout">{{ t('checkout') }}</button>
                </div>
            </div>
        </div>

        <div class="content" v-if="activeTab === 'orders'">
            <div v-if="orders.length === 0" style="text-align: center; padding: 50px 0;">
                {{ t('noOrders') }}
            </div>
            <div class="order-item" v-for="order in orders" :key="order.id">
                <div>{{ t('order') }} #{{order.id}}</div>
                <div>{{ t('amount') }}: {{ formatPrice(order.total) }}</div>
                <div>{{ t('status') }}: {{ order.status === 'pending' ? t('preparing') : t('completed') }}</div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            mounted() {
                document.addEventListener('click', this.handleDocumentClick);
            },
            beforeDestroy() {
                document.removeEventListener('click', this.handleDocumentClick);
            },
            data: {
                activeTab: 'menu',
                currentLanguage: 'zh',
                currentCurrency: 'CNY',
                showLanguageDropdown: false,
                showCurrencyDropdown: false,
                translations: {
                    zh: {
                        restaurantName: '🍔 美味餐厅',
                        menu: '菜单',
                        cart: '购物车',
                        orders: '订单',
                        add: '添加',
                        emptyCart: '购物车为空',
                        total: '总计',
                        checkout: '立即结算',
                        noOrders: '暂无订单',
                        order: '订单',
                        amount: '金额',
                        status: '状态',
                        preparing: '准备中',
                        completed: '已完成',
                        addedToCart: '已添加到购物车',
                        orderSuccess: '订单提交成功！订单号: #',
                        burgerCombo: '汉堡套餐',
                        mainDishes: '主食',
                        signatureBurger: '招牌汉堡套餐',
                        chickenBurger: '鸡肉汉堡套餐',
                        pasta: '意大利面',
                        pizza: '披萨'
                    },
                    en: {
                        restaurantName: '🍔 Delicious Restaurant',
                        menu: 'Menu',
                        cart: 'Cart',
                        orders: 'Orders',
                        add: 'Add',
                        emptyCart: 'Cart is empty',
                        total: 'Total',
                        checkout: 'Checkout',
                        noOrders: 'No orders',
                        order: 'Order',
                        amount: 'Amount',
                        status: 'Status',
                        preparing: 'Preparing',
                        completed: 'Completed',
                        addedToCart: 'Added to cart',
                        orderSuccess: 'Order submitted successfully! Order #',
                        burgerCombo: 'Burger Combos',
                        mainDishes: 'Main Dishes',
                        signatureBurger: 'Signature Burger Combo',
                        chickenBurger: 'Chicken Burger Combo',
                        pasta: 'Pasta',
                        pizza: 'Pizza'
                    },
                    ja: {
                        restaurantName: '🍔 美味レストラン',
                        menu: 'メニュー',
                        cart: 'カート',
                        orders: '注文',
                        add: '追加',
                        emptyCart: 'カートは空です',
                        total: '合計',
                        checkout: '決済',
                        noOrders: '注文はありません',
                        order: '注文',
                        amount: '金額',
                        status: '状態',
                        preparing: '準備中',
                        completed: '完了',
                        addedToCart: 'カートに追加されました',
                        orderSuccess: '注文が送信されました！注文番号: #',
                        burgerCombo: 'バーガーセット',
                        mainDishes: 'メインディッシュ',
                        signatureBurger: '特製バーガーセット',
                        chickenBurger: 'チキンバーガーセット',
                        pasta: 'パスタ',
                        pizza: 'ピザ'
                    }
                },
                exchangeRates: {
                    CNY: 1.0,
                    USD: 0.14,
                    EUR: 0.13,
                    JPY: 20.0
                },
                currencySymbols: {
                    CNY: '¥',
                    USD: '$',
                    EUR: '€',
                    JPY: '¥'
                },
                menu: [
                    {
                        id: 1,
                        nameKey: 'burgerCombo',
                        dishes: [
                            { id: 101, nameKey: 'signatureBurger', price: 38, emoji: '🍔' },
                            { id: 102, nameKey: 'chickenBurger', price: 32, emoji: '🍗' }
                        ]
                    },
                    {
                        id: 2,
                        nameKey: 'mainDishes',
                        dishes: [
                            { id: 201, nameKey: 'pasta', price: 28, emoji: '🍝' },
                            { id: 202, nameKey: 'pizza', price: 48, emoji: '🍕' }
                        ]
                    }
                ],
                cartItems: [],
                orders: []
            },
            computed: {
                cartTotal() {
                    return this.cartItems.reduce((total, item) => total + item.quantity, 0);
                },
                totalPrice() {
                    return this.cartItems.reduce((total, item) => total + (this.convertPrice(item.price) * item.quantity), 0);
                }
            },
            methods: {
                t(key) {
                    return this.translations[this.currentLanguage][key] || key;
                },
                switchLanguage(lang) {
                    this.currentLanguage = lang;
                },
                toggleLanguageDropdown() {
                    this.showLanguageDropdown = !this.showLanguageDropdown;
                    this.showCurrencyDropdown = false;
                },
                toggleCurrencyDropdown() {
                    this.showCurrencyDropdown = !this.showCurrencyDropdown;
                    this.showLanguageDropdown = false;
                },
                switchLanguage(lang) {
                    this.currentLanguage = lang;
                    this.showLanguageDropdown = false;
                },
                switchCurrency(currency) {
                    this.currentCurrency = currency;
                    this.showCurrencyDropdown = false;
                },
                handleDocumentClick(event) {
                    const languageSwitcher = this.$el.querySelector('.language-switcher');
                    const currencySwitcher = this.$el.querySelector('.currency-switcher');
                    
                    if (!languageSwitcher.contains(event.target)) {
                        this.showLanguageDropdown = false;
                    }
                    if (!currencySwitcher.contains(event.target)) {
                        this.showCurrencyDropdown = false;
                    }
                },
                convertPrice(price) {
                    return price * this.exchangeRates[this.currentCurrency];
                },
                formatPrice(price) {
                    const converted = this.convertPrice(price);
                    return `${this.currencySymbols[this.currentCurrency]}${converted.toFixed(2)}`;
                },
                addToCart(dish) {
                    const existingItem = this.cartItems.find(item => item.id === dish.id);
                    if (existingItem) {
                        existingItem.quantity++;
                    } else {
                        this.cartItems.push({...dish, quantity: 1});
                    }
                    alert(this.t('addedToCart'));
                },
                updateQuantity(item, change) {
                    item.quantity += change;
                    if (item.quantity <= 0) {
                        this.cartItems = this.cartItems.filter(i => i.id !== item.id);
                    }
                },
                checkout() {
                    if (this.cartItems.length === 0) return;
                    
                    const newOrder = {
                        id: Date.now(),
                        total: this.totalPrice,
                        status: 'pending'
                    };
                    
                    this.orders.unshift(newOrder);
                    this.cartItems = [];
                    this.activeTab = 'orders';
                    
                    alert(this.t('orderSuccess') + newOrder.id);
                }
            }
        });
    </script>
</body>
</html>